<template>
  <div class="common-title-m f-r-dc" v-if="localStore.innerWidth <= 768">
    <div class="back-box f-r-cc cursor" @click="back">
      <el-icon :size="22" color="#111"><Back /></el-icon>
    </div>
    <span>入驻记录</span>
  </div>
  <div class="registration-record-container">
    <template v-if="localStore.innerWidth > 768">
      <ul class="registration-record-ul" v-if="user_merchant_intention.length">
        <li class="registration-record-li f-r-sbc" v-for="(item,index) in user_merchant_intention" :key="index">
          <div class="base-info f-r-dc">
            <img :src="$imgUrl(item.images[0])" alt="" class="info-logo" />
            <div class="info-desc">
              <p class="info-name cursor-d line1">{{ item.name }}</p>
              <p class="info-time cursor-d">{{ item.create_time }}</p>
            </div>
          </div>
          <div class="action-ctn f-r-dc">
            <div class="status f-c-cc">
              <p class="status-text cursor-d" :class="item.status != 2 ? 'active' : ''">{{ getStatus(item.status) }}</p>
              <p class="status-tips f-r-cc" v-if="item.status === 2">
                <span class="tips cursor-d">查看原因</span>
                <el-tooltip class="box-item" effect="light" placement="bottom">
                  <el-icon color="#7285A0" class="cursor" size="18">
                    <InfoFilled />
                  </el-icon>
                  <template #content>
                    <span>{{ item.fail_msg }}</span>
                  </template>
                </el-tooltip>
              </p>
            </div>
            <div class="btn f-r-cc cursor" v-if="item.status === 2" @click="toPage('Investment')">重新提交</div>
            <div class="btn f-r-cc cursor" v-if="item.status === 1" @click="toPage('Downloads')">下载APP管理店铺</div>
          </div>
        </li>
      </ul>
      <defaultImg v-else></defaultImg>
    </template>
    <!-- 移动 -->
    <template v-else>
      <ul class="registration-record-ul" v-if="user_merchant_intention.length">
        <li class="registration-record-li" v-for="(item,index) in user_merchant_intention" :key="index">
          <div class="base-info f-r-sbc">
            <div class="f-r-dc base-info-left">
              <img :src="$imgUrl(item.images[0])" alt="" class="info-logo" />
              <div class="info-desc">
                <p class="info-name cursor-d line1">{{ item.name }}</p>
                <p class="info-time cursor-d">{{ item.create_time }}</p>
              </div>
            </div>

            <div class="status f-c-fec">
              <p class="status-text cursor-d" :class="item.status != 2 ? 'active' : ''">{{ getStatus(item.status) }}</p>
              <p class="status-tips f-r-cc" v-if="item.status === 2">
                <span class="tips cursor-d">查看原因</span>
                <el-tooltip class="box-item" effect="light" placement="bottom">
                  <el-icon color="#7285A0" class="cursor" size="18">
                    <InfoFilled />
                  </el-icon>
                  <template #content>
                    <span>{{ item.fail_msg }}</span>
                  </template>
                </el-tooltip>
              </p>
            </div>

          </div>
          <div class="action-ctn f-r-fec">
            <div class="btn f-r-cc cursor" v-if="item.status === 2" @click="toPage('Investment')">重新提交</div>
            <div class="btn f-r-cc cursor" v-if="item.status === 1" @click="toPage('Downloads')">下载APP管理店铺</div>
          </div>
        </li>
      </ul>
      <defaultImg v-else></defaultImg>
    </template>
  </div>
</template>

<script setup>
import { InfoFilled } from '@element-plus/icons-vue'
import { getUserMerchantIntention } from '@/api/index'
import { useLocal } from '@/stores/local'

const localStore = useLocal()
const router = useRouter()

const emits = defineEmits(['back'])

const user_merchant_intention = ref([])
// 获取商户入驻申请记录
async function getData () {
  let res = await getUserMerchantIntention()
  user_merchant_intention.value = res.data
}

function getStatus (status) {
  switch (status) {
    case 0:
      return '待审核'
    case 1:
      return '审核成功'
    case 2:
      return '审核失败'
  }
}

function back() {
  emits('back')
}

function toPage (name) {
  router.push({ name })
}

onMounted(() => {
  getData()
})

</script>
<style scoped lang="less">
@import './index.less';
@media screen and (max-width: 768px) {
  @import './mobile/index.less';
}
</style>
